
<style>
	.alert_msg{
		width: 70%;
	}
	.look{
		color: #0077AA;
	}
	.del{
		color: orangered;
	}
	.edit{
		color:blue;
	}
	.todolist_ul li{
		height: 40px;
		line-height: 40px;
		border: 1px dotted darkgray;
		width: 90%;
		margin: 0 auto;
		border-radius: 5px;
		margin-left: 10px;
	}
	.alert_message{
		
		width: 80%;
		margin: 60px auto;
	}
</style>

<template>
	<div>
		<NavCom :title="title" :isBack="isBack"></NavCom>
		<div  class="pt40 main_add">
			<div class="tips p10" style="color: darkgray;">
				<p class="lh30">我的便签~</p>
				<p class="lh30"  v-if="istips" >空空如也~~快来添加你自己的便签吧</p>
			</div>
			<p class="tac pt20" >
				<el-button type="text" @click="createNewTodo()"><i class="iconfont iconicon02 f50" style="color: darkgray;" ></i></el-button>				
			</p>
	
		</div>
		<ul class="todolist_ul">
			<li  class="oh one_line " style="width: 100%;" v-for="(item,index) in todolistArr"  :key="index" >
				<p class="fl pl10 pr10 oh " style="width: 55%;box-sizing: border-box;">{{item}}</p>
				<p class="fr pr10" style="width: 45%;box-sizing: border-box;">
					<em class="look p10" @click="look(item)">查看</em>
					<i class="del p10" @click="del(index)">删除</i>
					<b class="edit p10 " @click="edit(item,index)">编辑</b>
				</p>
			</li>
		
		</ul>
		
		
		
	</div>
</template>

<script>
	
	
	export default {
		components: {
		  NavCom:()=>import("../com/navCom"),
		 
		},
		data() {
		    return {  
				title:"首页",
				isBack:false,
				istips:true,
				todolistArr:[],
				todo_content:"",
		    }
		},
		created() {
			if(window.localStorage.getItem('todolistArr')){
				this.todolistArr=JSON.parse(window.localStorage.getItem('todolistArr'));
			
				
			}else{
				 window.localStorage.setItem('todolistArr',JSON.stringify(this.todolistArr));

			}
		},
		methods:{
			createNewTodo(){
				 this.$prompt('请输入便签内容', '', {
					 customClass:'alert_msg',
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  
					}).then(({ value }) => {
						if(value){
						  this.$message({
							 customClass:'alert_message',
							type: 'success',
							duration:500,
							message: '新的便签已保存'
						  });
						  this.todolistArr.push(value);
						   window.localStorage.setItem('todolistArr',JSON.stringify(this.todolistArr));
						  this.istips=false; 
						 
								
						}else{
							 this.$message({
								  customClass:'alert_message',
								 type: 'warning',
								 duration:500,
								message: '便签内容不能为空'
							});  
						}
				  
					  
					  
					}).catch(() => {
					  this.$message({
						   customClass:'alert_message',
						 type: 'warning',
						 duration:500,
						message: '取消输入'
					  });       
					});
			},
			
			look(a){
				 this.$alert(a, '便签详情', {
				  confirmButtonText: '确定',
				   customClass:'alert_msg'
				});
			},
			del(b){
				 this.todolistArr.splice(b,1);
				  window.localStorage.setItem('todolistArr',JSON.stringify(this.todolistArr));
				  
				 if(this.todolistArr.length==0){
					  this.istips=true; 
					 
				 }
				 
				 								
			},
			edit(c,d){
				 this.$prompt('请编辑便签内容', '', {
					 customClass:'alert_msg',
					  confirmButtonText: '确定',
					  cancelButtonText: '取消',
					  inputValue:c,
					  
					}).then(({ value }) => {
						if(value){
						  this.$message({
							   customClass:'alert_message',
							type: 'success',
							message: '新的便签已保存'
						  });
						 this.todolistArr.splice(d,1,value);
						  window.localStorage.setItem('todolistArr',JSON.stringify(this.todolistArr));
						 
						}else{
							 this.$message({
								  customClass:'alert_message',
								 type: 'warning',
								message: '便签内容不能为空',
								duration:500,
							});  
						}
 
					  
					  
					}).catch(() => {
					  this.$message({
						   customClass:'alert_message',
						 type: 'warning',
						 duration:1000,
						message: '取消编辑'
					  });       
					});
			}
		
		
	}	
	}
</script>

